<template>
  <div class="datagrid-table-wrapper">
    <!-- 表格 -->
    <div class="datagrid-add" v-if="addable">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="handleAdd"
      >
        新增
      </el-button>
    </div>
    <!-- 前端分页  -->
    <el-table
      :data="
        dataList.length > pageSize
          ? dataList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          : dataList
      "
      border
      class="datagrid-table"
      style="width: 100%"
      :max-height="
        maxHeight ||
        (total > pageSize ? 'calc(100% - 30px)' : 'calc(100% - 50px)')
      "
      :height="height || 1000"
      :header-cell-style="{ background: '#F0F0F0', color: '#333' }"
      v-loading="loading"
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="100"
        v-if="showIndex"
      ></el-table-column>
      <template v-for="(column, index) in columns">
        <slot :name="column.prop" v-if="column.slot"></slot>
        <el-table-column
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width || ''"
          :prop="column.prop"
          v-else
        >
          <template slot-scope="scope">
            <el-switch
              v-if="column.type === 'switch'"
              v-model="scope.row[column.prop]"
              active-text="启用"
              inactive-text="禁用"
              active-color="#18CF73"
              inactive-color="#AFAFAF"
              :active-value="0"
              :inactive-value="1"
              @change="$emit('change-switch', $event, scope.row)"
            />
            <span
              v-else-if="column.prop.indexOf('.') !== -1"
              :title="getDeepProp(scope.row, column.prop)"
              style="margin-left: 10px"
            >
              {{ getDeepProp(scope.row, column.prop) }}
            </span>
            <span
              v-else
              :title="scope.row[column.prop]"
              style="margin-left: 10px"
            >
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>
      </template>
      <slot></slot>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      small
      class="datagrid-pagination"
      prev-text="上一页"
      next-text="下一页"
      layout="total, prev, pager, next, sizes, jumper"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="total"
      :hide-on-single-page="singlePageHide"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'DatagridTable',
  props: {
    showIndex: { type: Boolean, default: true },
    singlePageHide: { type: Boolean, default: true },
    loading: Boolean,
    height: { type: [String, Number] },
    maxHeight: { type: [String, Number] },
    dataList: Array,
    columns: Array,
    rules: Object,
    total: Number,
    currentPage: Number,
    pageSize: Number,
    pageSizes: {
      type: Array, default: function () {
        return [10, 20, 30, 40]
      }
    },
    addable: { type: Boolean, default: false },
  },
  computed: {
    getDeepProp() {
      return function (row, prop) {
        const pro = prop.split('.');
        return row[pro[0]][pro[1]];
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      // this.$store.commit('system/SET_ROWS', val);
      this.$emit('handle-size-change', val);
    },
    handleCurrentChange(val) {
      // this.$store.commit('system/SET_PAGE', val);
      this.$emit('handle-current-change', val);
    },
    handleAdd() {
      this.$emit('handle-add');
    },
  }
}
</script>

<style lang="scss">
.datagrid-table-wrapper {
  padding: 1em;
  // background-color: #ddd;
  .datagrid-add {
    padding-bottom: 1em;
    text-align: right;
  }
  .datagrid-pagination {
    padding: 1em;
    text-align: right;
    background-color: #fff;
  }
  .el-pagination--small .el-input__inner {
    height: 22px !important;
    line-height: 22px !important;
  }
  .text-btn {
    margin: 0 1em;
    cursor: pointer;
    &.text-edit {
      color: #3285fe;
    }
    &.text-else {
      color: #67c23a;
    }
    &.text-delete {
      color: #f56c6c;
    }
  }
}
</style>
<style lang="scss">
.system-panel-wrapper {
  .datagrid-table-wrapper {
    height: calc(100% - 70px);
  }
  .datagrid-table {
    max-height: calc(100% - 70px);
  }
}
</style>